<template>
  <div class="brand">
    <el-card>
      <template #header>
        <el-button type="primary" @click="addBrand">添加品牌</el-button>
      </template>
      <el-table :data="tableData" border style="width: 100%" height="500">
        <el-table-column label="序号" prop="id" width="50" />
        <el-table-column prop="brandName" label="品牌名称" width="180" />
        <el-table-column prop="brandLogo" label="品牌Logo" width="180" align="center">
          <template #default="scope">
            <img height="80px" width="auto" class="brand-logo" :src="scope.row.brandLogo" alt="" />
          </template>
        </el-table-column>
        <el-table-column prop="brandDesc" label="品牌描述" width="240" />
        <el-table-column prop="操作" label="操作" width="auto">
          <template #default="scope">
            <el-button type="primary" size="small" @click="todetail(scope.row)">查看</el-button>
            <el-button type="primary" size="small" @click="toedit(scope.row)">编辑</el-button>
            <el-button type="danger" size="small" @click="todelete(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="footer">
        <el-pagination
          background
          layout="prev, pager, next, jumper, ->, sizes, total"
          v-model:page-size="pagination.pageSize"
          :page-sizes="[10, 20, 40]"
          :total="pagination.total"
          @change="handleChange"
        />
      </div>
    </el-card>
    <dailog :showDialog="showDialog" @hideDialog="showDialog = false" />
  </div>
</template>

<script lang="ts" setup>
import { onMounted, ref } from 'vue'
import dailog from './dailog.vue'

onMounted(() => {
  getBrandList()
})
const showDialog = ref(false)
const tableData = ref([])
const pagination = ref({
  pageSize: 10,
  currentPage: 1,
  total: 50
})
const getBrandList = () => {
  // 调用接口获取品牌列表
  tableData.value = [
    {
      id: '1',
      brandName: '品牌1',
      brandLogo: 'https://free-img.400040.xyz/4/2024/06/24/66794c3bcb54b.jpg',
      brandDesc: '品牌1描述'
    },
    {
      id: '2',
      brandName: '品牌2',
      brandLogo: 'https://free-img.400040.xyz/4/2024/06/24/66794c0b3c103.jpg',
      brandDesc: '品牌2描述'
    },
    {
      id: '3',
      brandName: '品牌3',
      brandLogo: 'https://free-img.400040.xyz/4/2024/06/24/66794c097f871.jpg',
      brandDesc: '品牌3描述'
    },
    {
      id: '4',
      brandName: '品牌4',
      brandLogo: 'https://free-img.400040.xyz/4/2024/11/28/6747cf9713590.png',
      brandDesc: '品牌4描述'
    },
    {
      id: '5',
      brandName: '品牌5',
      brandLogo: 'https://free-img.400040.xyz/4/2024/07/03/6684faed62a83.webp',
      brandDesc: '品牌5描述'
    },
    {
      id: '6',
      brandName: '品牌6',
      brandLogo: 'https://free-img.400040.xyz/4/2024/11/28/6747cf9713590.png',
      brandDesc: '品牌6描述'
    },
    {
      id: '7',
      brandName: '品牌7',
      brandLogo: 'https://free-img.400040.xyz/4/2024/06/25/667a6dcc5d093.webp',
      brandDesc: '品牌7描述'
    },
    {
      id: '8',
      brandName: '品牌8',
      brandLogo: 'https://free-img.400040.xyz/4/2024/11/28/6747cf9713590.png',
      brandDesc: '品牌8描述'
    },
    {
      id: '9',
      brandName: '品牌9',
      brandLogo: 'https://free-img.400040.xyz/4/2024/07/03/6684faed62a83.webp',
      brandDesc: '品牌9描述'
    }
  ]
}
const addBrand = () => {
  showDialog.value = true
  console.log('添加品牌', showDialog.value)
}
const handleChange = (val: any) => {
  console.log(val)
}
const todetail = (row: any) => {
  showDialog.value = true
  console.log(row)
}
const toedit = (row: any) => {
  showDialog.value = true
  console.log(row)
}
const todelete = (row: any) => {
  console.log(row)
}
</script>

<style lang="scss" scoped>
.brand {
  padding: 10px 20px;

  .brand-logo {
    height: 80px;
    width: auto;
    object-fit: cover;
    margin: 0 auto;
    border: 1px solid #ccc;
    border-radius: 5px;
  }
  .footer {
    margin-top: 15px;
  }
}
</style>
